<template>
    <div class="home">

        <el-container>
        <el-header>UUWFI流量管理系统
            <div>
            <span class="welcome">
              您好，xxx
            </span>
            <el-button type="text" @click="logout">退出</el-button>
          </div>
        </el-header>
        <el-container>
             <el-aside width="200px">
                    <el-menu  
                    default-active="2"
                    :unique-opened="ture"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    v-for="(item,i) in nav" :key="i">
                        <el-submenu index='item'>
                            <template slot="title"><i class="el-icon-message"></i>{{item.title}}</template>
                            <el-menu-item-group v-for="(item,index) in item.data" :key="index">
                            <el-menu-item index="item">{{item}}</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>


                      <!-- <el-menu
                            default-active="2"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose">
                            <el-submenu index="1">
                                <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>导航一</span>
                                </template>
                                <el-menu-item-group>
                                <el-menu-item index="1-1">选项1</el-menu-item>
                                <el-menu-item index="1-2">选项2</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                    </el-menu> -->
            </el-aside>

            <el-main>
                欢迎
            <router-view></router-view>
            </el-main>
        </el-container>
        </el-container>

    </div>
</template>


<script>
      import {mapState,mapGetters,mapActions } from 'vuex';
export default {
  
  computed:{
     ...mapState('account/xiongxiaokang',['nav']),
     
  },
  data () {
    return {
        
    }
  },
  
  created(){
        this.par()
        
  },
  methods: {
      ...mapActions('account/xiongxiaokang',['par']),
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }

  },
  updated(){
        console.log('更新',this.nav)
  }
}

</script>



<style>
    html,body{
        padding: 0;
        margin: 0;
    }
</style>

<style lang="less" scoped>
.el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    line-height: 60px;
    height: 60px;
    width: 100%;
    color: #000;
    z-index: 8888;
    background-color: #3169a0;
  }
  
.el-aside {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #b3b1b1;
  height: 1000px;
}
  
.el-main {
  background-color: rgb(160, 96, 96);
  color: #333;
  margin-top: 60px;
  margin-left: 200px;
}


body > .el-container {
  margin-bottom: 40px;
}

.toggle-btn {
    font-size: 36px;
    color: #686262;
    cursor: pointer;
    line-height: 60px;
  }
  .system-title {
    font-size: 28px;
    color: white;
  }
  .welcome, {
    color: white;
  }


</style>
